<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./03.css">
</head>
<body>
    <div class="container">
        <div class="circle-container">
            <div class="circle">
                <button id="close">
                    <i>关</i>
                </button>
                <button id="open">
                    <i>开</i>
                </button>
            </div>
        </div>
        <div class="content">
            <h1>Amazing Article</h1>
            <small>Florin Pop</small>
            <p>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione illum perferendis asperiores placeat eveniet excepturi iure nihil nulla dolores vitae laudantium quae, pariatur minus ut ipsa molestiae! Omnis, reiciendis nesciunt?
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque, ullam at quisquam voluptates deserunt est dignissimos beatae minus, ducimus inventore cum optio exercitationem asperiores veniam aliquid, tenetur illum eius libero.
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa eligendi aperiam vel, ratione ex consectetur asperiores eos consequatur voluptatibus quod aspernatur veniam deserunt iusto fuga rerum tempora ipsa accusantium voluptatum.
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi eius dolore autem magnam eligendi, optio quasi voluptas ipsam unde aperiam odio excepturi, porro iste sequi aliquam maxime in asperiores vero!
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque ab esse deserunt vel exercitationem illum dicta, reprehenderit, officia sunt quae vero tempore assumenda? Libero natus eius, repellendus vero expedita illum.
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam tenetur facere maiores dolore sit. Commodi, quia! Blanditiis at deserunt corporis nisi doloremque quos molestiae, laudantium veritatis omnis fugiat debitis aut.
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita fugit velit autem hic aliquid molestias in sed saepe repudiandae, libero maxime mollitia magni quasi architecto dignissimos totam explicabo quibusdam earum.
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae saepe fuga, tenetur sed eos illum alias tempore incidunt nulla aliquid recusandae? Vel blanditiis dicta molestiae quis ex iusto iure accusantium.
            </p>
            <h3>My Dog</h3>
            <img src="https://pics6.baidu.com/feed/d000baa1cd11728bad4a011dabca02c7c3fd2c6e.jpeg@f_auto?token=b7eb270076068a06e3aba20461a6d4af" alt="dog">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere ipsa enim quibusdam vero quia vitae blanditiis adipisci omnis nostrum, labore iure corrupti alias nobis? Nesciunt quia iste provident modi a?
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti ipsa alias iusto unde placeat saepe modi nam perferendis. Atque, error? Eum veniam quasi accusamus iure vitae dolores dicta aperiam laboriosam.
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo, delectus commodi id eaque adipisci ducimus qui autem nemo temporibus voluptatibus harum quae nulla iure eum ut iusto ratione sint dolorem.
            </p>

        </div>

    </div>
    <nav>
        <ul>
            <li><a href="">Home</a> </li>
            <li> <a href="">About</a></li>
            <li><a href="">Contact</a></li>
        </ul>
    </nav>
    <script src="./03.js"></script>
</body>
</html>